<template>
    <div class="ygg-radio-group">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "ygg-radio-group",
        props: {
            value: {},
        },
        provide() {
            return {
                radioGroup: this,
            }
        },
        watch: {
            value(val) {
                if (this.p_value !== val) this.p_value = val
            },
        },
        data() {
            return {
                p_value: this.value,
                children: [],
            }
        },
        methods: {
            addChild(child) {
                this.children.push(child)
            },
            removeChild(child) {
                const index = this.children.indexOf(child)
                if (index > -1) this.children.splice(index, 1)
            },
            handleClick(child) {
                if (child.val === this.p_value) {
                    return
                } else {
                    this.p_value = child.val
                    this.$emit('input', this.p_value)
                }
            },
            isActive(child) {
                return child.val === this.p_value
            },
        },

    }
</script>

<style>
    .ygg-radio-group {
        display: block;
    }
</style>